<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>工作门户首页</title>
		<script src="../../js/header.js"></script>
		<link rel="stylesheet" type="text/css" href="../../css/main_work.css">
	</head>
	<body>
		<div v-cloak id="app">
		    <el-container
				class="height100percent"
				v-loading="loading"
				element-loading-text="拼命加载中"
				element-loading-spinner="el-icon-loading">
		    	<!-- 顶栏容器 -->
		        <el-header class="el-header" style="height: auto;">
		        	<el-row type="flex" justify="center">
						<el-col :span="12">
							<div class="grid-content bg-purple">
								<el-row style="text-align: left;">
									<el-col :span="4">
		        						<img src="../../images/logo_white.png" style="margin-top: 20px;width: 88px;height: 88px;">
		        					</el-col>
		        					<el-col :span="20">
		        						<span class="el-header-title" style="">中国地震局“互联网+监管”公共服务平台</span>
									</el-col>
								</el-row>
							</div>
						</el-col>
  						<el-col :span="3" >
  							<div class="grid-content bg-purple-light">
  								<el-row style="text-align: right;">		
		        					<el-col :span="24">
		        						<div v-if="name != ''">
		        							<img src="../../images/login_image.png" style="vertical-align: sub;width: 21px;height: 21px;">
											<div style="display:inline-block; line-height: 129px;font-family: PingFangSC-Medium;font-size: 16px;color: #FFFFFF;">
												<span style="color:#fff;margin-right: 10px;">欢迎{{name}}</span>
												<el-button type="text" @click="logOut" style="font-family: PingFangSC-Medium;font-size: 16px;color: #fff;">退出</el-button>
											</div>
										</div>
		        						<div v-else>
			        						<img src="../../images/login_image.png" style="vertical-align: sub;width: 21px;height: 21px;">
			  								<div style="display:inline-block; line-height: 129px;font-family: PingFangSC-Medium;font-size: 16px;color: #FFFFFF;">
				  								<span class="headMenu" prop="userType" :label="用户类型"  @click="login">登录</span>
				  								<span style="color: #FFFFFF;opacity: 0.5;">/</span>
				  								<span class="headMenu" prop="userType" :label="用户类型"  @click="register">注册</span>
			  								</div>
		  								</div>
	  								</el-col>
  								</el-row>
  							</div>
  						</el-col>
					</el-row>
					<el-row type="flex" justify="center" style="background: #1D60A6;">
						<el-col :span="15">
							<ul class="ul-left ul-tab">
								<li style="background: #185392;width: 15%;">
									<span class="tab_title">首页</span>
								</li>
								<template v-for="(item, index) in sysApp">
									<!--<li style="width: 20%">-->
									<li style="width: 20%">
										<a :href="item.appUrl" target="_blank">
											<span class="tab_title">{{item.appName}}</span>
										</a>
									</li>
								</template>
							</ul>
						</el-col>
					</el-row>
		        </el-header>
		        <!-- 主要区域容器 -->
		        <el-main>
					<iframe frameborder="0" width="100%" id="frame-index" :src="iframesrc" style="min-height: 400px;" @load="loadSetIframeHeight"></iframe>
				</el-main>
				<!-- 底栏容器 -->
				<el-footer style="height: auto;margin-top: 25px;">
					<el-row type="flex" justify="center">
	  					<el-col>
	  						<div class="grid-content bg-purple">
	  							<el-row type="flex" justify="center" class="bottom_link" style="background-image: linear-gradient(-78deg, #1765A7 0%, #1665A7 99%);">
									<el-col :span="15">
										<div style="text-align: left;">
											<span class="other_link_title" style="width: 12.5%;">友情链接：</span>
											<a href="#" class="other_link" style="width: 13%;"><span>中国科普博览</span></a>
											<a href="#" class="other_link" style="width: 13%;"><span>中国科技云</span></a>
											<a href="#" class="other_link" style="width: 26%;"><span>中科院仪器设备共享管理平台</span></a>
											<a href="#" class="other_link" style="width: 18%;"><span>首都科技条件平台</span></a>
											<a href="#" class="other_link"><span>中国科学院</span></a>
											<a href="#" class="other_link_last"><span>科搜网</span></a>
										</div>
									</el-col>
	  							</el-row>
	  							<el-row type="flex" justify="center" style="padding: 25px 0;background-color: #E4EBEF;">
	  								<el-col :span="15">
										<div class="divleft" style="margin-top: 5px;">
					        				<img src="../../images/finderror.png" style="width: 129px;height: 57px;">
										</div>
										<div class="divleft" style="margin-left: 5%;">
					        				<img src="../../images/logo.png" style="width: 67px;height: 67px;">
										</div>
										<div class="divleft" style="width: 44%; margin-left: 4%;text-align: left;padding-right: 3px;">
											<div style="line-height: 1em;">
												<span class="website_footer">本平台为国家重点研发计划“现代服务业”重点专项项目</span>
											</div>
											<div style="margin: 5px 0;line-height: 1em;">
												<span class="website_footer">京公安网备11010802017084号</span>
											</div>
											<div style="line-height: 1em;">
												<span class="website_footer">Copyright@2019 中国地震局“互联网+监管”公共服务平台 版权所有</span>
											</div>
										</div>
										<div class="divleft" style="width: 1px;height: 70px;border-left: 1px solid #9B9B9B;opacity: 0.56;"></div>
										<div class="divleft" style="float: right;text-align: left;">
											<div style="line-height: 1em;">
												<span class="website_footer">地址：北京海淀区学院南路55号</span>
											</div>
											<div style="margin: 5px 0;line-height: 1em;">
												<span class="website_footer">邮箱：074200</span>
											</div>
											<div style="line-height: 1em;">
												<span class="website_footer">主办单位：中国地震局</span>
											</div>
										</div>
									</el-col>
	  							</el-row>
	  						</div>
	  					</el-col>
	  				</el-row>
				</el-footer>
		    </el-container>
		</div>
	</body>
	<script type="text/javascript">
		var mainwork = new Vue({
	        el: '#app',
	        created: function () {
				var userInfo = JSON.parse(localStorage.getItem('userInfo'));
				this.name = userInfo.loginName;
	        },
	        updated: function(){
	        	
	        },
	        data: function () {
	            return {
                    imagesbox:[
                        {id:0,idView: "../../images/forest.png"},
                        {id:1,idView: "../../images/sunrise.jpg"},
                        {id:2,idView: "../../images/sunshine.png"}
                    ],
					name:"",
                iframesrc : appBaseUrl + '/html/mainwork/sy.html',
                    iframeheight1: '',// iframe原始高度
                    iframeheight2: '',// iframe改变后高度
                    loading: false,
                    sysApp: ''
            }
            },
            mounted: function () {
            this.getApp();
            var allcookies=document.cookie;
            var userName="userName";
               /* var cookie_pos=allcookies.indexOf(userName);
                if(cookie_pos != -1){
                    cookie_pos += userName.length+1;
                    var cookie_end=allcookies.indexOf(";",cookie_pos);
                    if (cookie_end == -1){
                        cookie_end=allcookies.length;
                    }
                    var value=unescape(allcookies.substring(cookie_pos,cookie_end));
                    this.name=value;
                    console.log(this.name);

                }*/
                this.loadingTime();
            },
	        methods: {
                logOut(){
                    axios({
						method: 'post',
						url: appBaseUrl + '/login/logout',
					})
					.then(response => {
					    let data = response.data;
					    if(data.code == 200){
					        localStorage.clear();
					        location.href = location.origin + appBaseUrl + '/html/login.html';
						}else{
					        this.$message.error(data.msg);
						}
					})
					.catch(function(error){
					    console.log(error);
					})
                },
				login(){
	        	  location.href="../login.html"
				},
				register(){
	        	  location.href="../register.html"
				},
                // 初始设置iframe的高度
                loadSetIframeHeight() {
                    var iframe = document.getElementById('frame-index');
                    if (iframe) {
                        iframe.height = iframe.contentWindow.document.documentElement.scrollHeight;
                        this.iframeheight1 = iframe.contentWindow.document.documentElement.scrollHeight;
                    }
                },
                // 设置iframe的高度
                setIframeHeight(height) {
                    var iframe = document.getElementById('frame-index');
                    if (iframe) {
                        iframe.height = height;
                    }
                },
                // 恢复原高度
                recoveryIframeHeight(){
                    var iframe = document.getElementById('frame-index');
                    if (iframe) {
                        iframe.height = this.iframeheight1;
                    }
                },
                loadingTime(){
                    this.loading = true;
                    var $this = this;
                    setTimeout(function(){
                        $this.loading = false;
                    },1500)
                },
                // 页面跳转
                changePage(url){
                    this.loadingTime();
                    this.iframesrc = url;
                },
                //返回主页
                backIndex(){
                    this.firstpagesrc=appBaseUrl + '/html/mainwork/sy.html';
                    window.location.reload();
                },
                getApp(){
                    axios({
                        method: 'get',
                        url: appBaseUrl + '/sys/getsys',
                    }).then(response => {
                        let data = response.data.data;
						this.sysApp=data;
					})
                }
	        },    
	    })
	</script>
	<body>
	</body>
</html>
